<!--  -->
<template>
    <dy-dialog 
        :title="'选择' + props.choseData.titleV"
        ref="dialog"
        :width="props.choseData.dialog_width ? props.choseData.dialog_width + 'px' : '60%'"
        @submitHandle="submitHandle"
    >
        <div class="detababox1">
            <div class="babox1">
                <div class="baboxspan">
                    <span>已选{{choseData.titleV}}: </span>
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="selectcode"
                        placement="top-start"
                        v-if="selectcode"
                    >
                        <span style="color:#1f2d3d;">{{selectcode}}</span>
                    </el-tooltip>
                </div>
                <div class="delectall" @click="delectallfun"><el-icon><Close /></el-icon></div>
            </div>
            <div class="babox2">
                <div class="babox6">
                    <dy-table
                        :elTable_Options="props.choseData" 
                        ref="table"
                        :maxHeight="240"
                    />
                </div>
            </div>
        </div>
    </dy-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, nextTick, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useCach } from '@/store/cach'
import commonV from '@/common'
import api from '@/api'

let props = defineProps({
    choseData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

let emits = defineEmits(['inputsydata'])

//实例
let dialog = ref(null)
let table = ref(null)

let state = reactive({
    selectcode: '',
    selectedList: []
})
let { selectcode } = toRefs(state)

//title
let pageConfig = useCach()
let chooseRow = computed(() => pageConfig.chooseRow)
watch(chooseRow, (val) => {
    let str = ''
    if(!props.choseData.selection){
        //多选
        for (var i = 0; i < val.multiple.length; i++) {
            let ccc = i == val.multiple.length - 1 ? "" : ","
            str += val.multiple[i][props.choseData.selectV] + ccc
        }
        state.selectcode = str
        return
    }
    //单选
    state.selectcode = val.radio ? val.radio[props.choseData.selectV] : ''
}, { deep: true })

//全部删除
let delectallfun = () => {
    state.selectcode = ""
    pageConfig.changeChooseRow({'radio': null, 'multiple': []}, true)
}

//打开执行
let openFunction = (row) => {
    if (!row) {
        delectallfun() //清空
    } else {
        state.selectcode = commonV.reverarr(row, props.choseData.selectV)
        pageConfig.changeInitChooseRow({ selection: props.choseData.selection , selectArr: row })
    }
    nextTick(async () => {
        gettabledata()
    })
}

//获取数据
let gettabledata = () => {
    table.value.getTableData()
}

//提交
let submitHandle = () => {
    if (!state.selectcode) {
        ElMessage({
            message: "请选择" + props.choseData.titleV,
            type: "warning"
        })
        return
    }
    emits('inputsydata', props.choseData.selection ? [chooseRow.value.radio] : chooseRow.value.multiple)
    dialog.value.handleClose()
}

defineExpose({ openFunction })
</script>

<style lang="scss" scoped>
    .detababox1 {
        padding-bottom: 10px;
        margin-top: 10px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(211, 220, 230, 1);
        width: 100%;
    }
   .babox1 {
        font-size: 14px;
        color: rgba(132, 146, 166, 1);
        padding: 7px 10px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        border-bottom: 1px solid #e0e6ed;
    } 
    .delectall {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:hover {
            opacity: .8;
        }
    }
</style>